<!--
 * @Description: 
 * @Author: 47
 * @Date: 2022-12-26 14:54:28
 * @LastEditors: 47
 * @LastEditTime: 2023-02-18 16:15:11
-->
<template>
    <div class="course-notice">
        <!-- 导航栏 -->
        <van-nav-bar :title="'[课程通知] '+courseTitle" left-arrow @click-left="onClickLeft">
            <template #right>
                <van-icon name="share-o" size="18" @click="showShare = true"/>
            </template>
        </van-nav-bar>

        <van-share-sheet
            v-model:show="showShare"
            title="立即分享给好友"
            :options="options"
        />

        <!-- 课程信息 -->
        <div class="course-con">
          <!-- 通知头部 -->
          <div class="notice-head">
              <div class="notice-title">{{ noticeMsg.notice_title }}</div>
              <div class="notice-send">
                  <span class="notice-author">{{ noticeMsg.notice_teacher }}</span>
                  <span class="notice-time">{{noticeMsg.notice_time}}</span>
              </div>
              <div class="notice-receive">
                  <div class="receive-title">收件人:&nbsp;</div>
                  <div class="receive-person">
                      {{ noticeMsg.notice_student }}
                  </div>
              </div>
              <div class="notice-read">
                  <span class="read-title">已读 :</span>
                  <span class="receive-num">4/20</span>
              </div>
          </div>

          <van-divider />

          <!-- 通知内容 -->
          <div class="notice-content">
              <!-- 文字内容 -->
              <div class="text-content">
                  {{ noticeMsg.notice_content }}
              </div>
              <!-- 资料内容 -->
              <div class="data-content">
                  <!-- ppt课件 -->
                  <div class="task-courseware">
                      <div class="task-inform">
                      <van-cell>

                          <!-- 使用 title 插槽来自定义标题 -->
                          <template #title>
                          <div class="inform-box">

                              <!-- 通知图片 -->
                              <div class="inform-ppt">
                              <span class="iconfont icon-ppt img-ppt"></span>
                              </div>

                              <!-- 通知内容 -->
                              <div class="inform-message">

                              <span class="message">
                                  书写 "一国两制" 实践新篇章.pptx
                              </span>

                              <span class="time">
                                  559.29 MB
                              </span>
                              
                              </div>
                          </div>
                          </template>

                      </van-cell>
                      </div>
                  </div>

                  <!-- word课件 -->
                  <div class="task-courseware">
                      <div class="task-inform">
                          <van-cell>

                              <!-- 使用 title 插槽来自定义标题 -->
                              <template #title>
                              <div class="inform-box">

                                  <!-- 通知图片 -->
                                  <div class="inform-word">
                                  <span class="iconfont icon-word img-word"></span>
                                  </div>

                                  <!-- 通知内容 -->
                                  <div class="inform-message">

                                  <span class="message">
                                      十九届六中全会决议全文.docx
                                  </span>

                                  <span class="time">
                                      63.62 KB
                                  </span>
                                  
                                  </div>
                              </div>
                              </template>

                          </van-cell>
                      </div>
                  </div>

              </div>
          </div>
          
        </div>

        <!-- 评论区 -->
        <div class="comment">
            <!-- 点赞 -->
            <van-cell class="like-msg">
                <span class="like-persons" v-for="likePeople in likeList" :key="likePeople.user_id">
                    {{likePeople.user_name}} 
                </span>
                <span class="like-num">等{{noticeMsg.notice_like_count}}人点赞</span>
            </van-cell>

            <!-- 评论列表 -->
            <van-list
                v-model:loading="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
            >
                <!-- 评论项 -->
                <div class="comment-item" v-for="(list,index) in commentList" :key="list.comment_id">
                    <img src="/images/headphoto.jpg" alt="" @click="goPeopleHome">
                    <div class="comment-msg">
                        <span class="name">{{ list.user_name }}
                            <button class="follow">关注</button>
                        </span>
                        <span>
                            <span class="floor">第{{ commentList.length - index }}楼</span>
                            <span class="time">{{ $filters.relativeTime(list.comment_time) }}</span>
                        </span>


                        <!-- 普通回复 -->
                        <span class="content" v-html="list.comment_content" v-if="list.comment_type == 1"></span>

                        <!-- 地图 -->
                        <div class="content" v-if="list.comment_type == 2">

                          <div class="mapLink">
                            <img src="/images/map.png" alt="" class="mapImg">
                            <i><van-icon name="location" color="#0496f4"/>{{list.comment_content}}</i>
                          </div>

                        </div>


                    </div>
                    <!-- <van-icon class="like-btn" name="good-job-o" /> -->
                </div>  

            </van-list>
        </div>

        <!-- 添加评论 -->
        <BottomComment  :noticeId="noticeId"/>
        <!-- <div class="bottom-comment">
            <van-icon class="add" name="add-o" />
            <van-field v-model="value"  placeholder="评论" />
            <span class="like" @click="updateLike(noticeMsg.like_status)">
                <van-icon :class="{'like-icon':noticeMsg.like_status == 1 ,'unlike-icon': noticeMsg.like_status == 0 }" name="good-job-o" />
                <span :class="{'like-num':noticeMsg.like_status == 1 ,'unlike-num': noticeMsg.like_status == 0 }" v-if="noticeMsg.like_status != 0">{{noticeMsg.notice_like_count}}</span>
            </span>
        </div> -->
    </div>
</template>

<script setup>
import { onMounted, ref,inject, computed} from 'vue';
import { List ,Field} from 'vant';
// 引入路由
import {useRouter} from 'vue-router'

// 导入 course 仓库
import {useCourseStore} from '@/stores/course'
import { storeToRefs } from 'pinia';

// 实例化仓库对象
const course = useCourseStore()

// 解构 数据
const {courseTitle,noticeId,noticeMsg,commentList,noticeDetail,likeList} = storeToRefs(course)

// 解构 方法
const {getNoticeDetail,toLike,getLikeList} = course

const reload = inject('reload')

//页面挂载后渲染 
onMounted(() => {
  // 获取通知详情页信息以及对应的评论区
  getNoticeDetail(noticeId.value,1)
  getLikeList(noticeId.value,1)
})

//点赞
const updateLike = async (likeStatus) => {
    await toLike({
        id:noticeId.value,
        userId:1,
        likeStatus
    })
    reload()
    //discussId和noticeId   userId
}

// 创建路由对象
const router = useRouter()

// 评论列表
const loading = ref(false);
const finished = ref(true);

const value = ref('')

//分享面板
const showShare = ref(false);
const options = [
    [
    { name: '微信', icon: 'wechat' },
    { name: '朋友圈', icon: 'wechat-moments' },
    { name: '微博', icon: 'weibo' },
    { name: 'QQ', icon: 'qq' },
    ],
];


// console.log(commentListArr.value);

const onLoad = () => {
  
}

// 返回上一页
const onClickLeft = () => {
  history.back()
}

// 跳转到PeopleHome页面
const goPeopleHome = () => {
  router.push('/peoplehome')
}
</script>

<style scoped lang="less">
.course-notice{
    :deep(.van-nav-bar)  {
        width: 100%;
        position: fixed;
    
         .van-nav-bar__title{
        // font-family: "Calibri";
        font-size: 13px;
        font-weight: 600;
        }
    }
    :deep(.van-share-sheet__options){
      justify-content: space-around;
    }

    .notice-head{
        display: flex;
        flex-flow: column;
        padding-top: 50px;
        margin-left: 15px;
        margin-right: 15px;

        .notice-title{
            font-size: 15px;
            font-weight: 600;
            margin-bottom: 15px;
        }
        .notice-send{
            margin-bottom: 15px;
            .notice-author{
                font-size: 13px;
                margin-right: 10px;
                color: #7bb3d0;
                font-weight: 600;
            }
            .notice-time{
                font-size: 13px;
                color: #adadad;
            }



        }
        .notice-receive{
            margin-bottom: 15px;
            display: flex;
            flex-flow: row;
            .receive-title{
                // width: 44px;
                font-size: 13px;
                font-weight: 600;
            }
            .receive-person{
                width: 280px;
                font-size: 13px;
                color: #adadad;   
            }
        }
        .notice-read{
            .read-title{
                font-size: 13px;
                color: #adadad; 
                font-weight: 600;
                margin-right: 7px;

            }
            .receive-num{
                font-size: 13px;
                color: #7bb3d0;
            }
        }


    }

    .notice-content{
        display: flex;
        flex-flow: column;
        margin-left: 15px;
        margin-right: 15px;
        .text-content{
            font-size: 15px;          
        }
        .data-content{
            .task-courseware{
                
                .task-inform{
                // border-bottom: 1px solid #f0f0f0;
                
                .inform-box{
                display: flex;
                flex-flow: row;
                align-items: center;
                padding: 10px;
                border-radius: 7px;
                background-color: #f4f5f7;

                .inform-ppt{
                    background-color: #ff694e;
                }
                .inform-word{
                    background-color: #579ff3;

                }

                .inform-ppt,
                .inform-word{
                    width: 50px;
                    height: 50px;
                    border-radius: 7px;

                    .img-word,
                    .img-ppt{
                    font-weight: 100;
                    line-height: 50px;
                    font-size: 30px;
                    margin-left: 8px;
                    color: #fdfefe;
                    }
                }

                .inform-message{
                    display: flex;
                    flex-flow: column;
                    margin-left: 16px;
                    width: 180px;

                    .message{
                    font-size: 13px;
                        /* 1.这个单词意思是文字显示不开必须强制一行显示 */
                        white-space: nowrap;
                        /* white-space: nowrap; */
                        /* 2.溢出部分隐藏 */
                        overflow: hidden;
                        /* 3.文字溢出的时候用省略号显示 */
                        text-overflow: ellipsis;
                    }
                    .time{
                    color: #c2c2c2;
                    font-size: 12px;
                    }
                }
                
                }
            
                .van-cell__right-icon{
                margin-top: 15px;
                }
            }
            }
        }
    }

    .comment{
        margin-top: 20px;
        margin-bottom: 33px;
        .like-msg{
            background-color: #fafafa;
            :deep(.van-cell__value){
                text-align: left;
            }
            .like-persons{
                margin-right: 5px;
            }
            .like-num{
                color: #5bb0d9;
            }
        }

        .comment-item{
            display: flex;
            flex-flow: row nowrap;
            background-color: #fafafa;
            :deep(.van-cell__value){
                text-align: left;
            }
            img{
                width: 40px;
                height: 40px;
                border-radius: 5px;
                margin: 10px;
            }
            .comment-msg{
                display: flex;
                flex-flow: column;
                width: 270px;
                margin-top: 5px;
                margin-bottom: 20px;
                margin-left: 5px;
                

                .name{
                    font-size: 15px;
                    margin-bottom: 5px;
                    .follow{
                            color: #5bb0d9;
                            border-color: #5bb0d9;
                            background-color: white;
                            border-radius: 7px;
                            font-size: 12px;
                            padding: 1px;
                            width: 30px;
                            height: 15px;
                            margin-left: 3px;
                            border-style: solid;
                    }
                }
                .floor{
                    font-size: 12px;
                        color: #B4B4B6;
                        margin-right: 10px;
                }
                .time{
                    font-size: 12px;
                    color: gainsboro;
                }
                .content{
                    font-size: 15px;
                    margin-top: 10px;
                    .mapLink{
                      display: flex;
                      flex-flow: row;
                      padding: 10px;
                      background-color: #f2f6f7;
                      border-radius: 5px;
                      .mapImg{
                        margin: 0 10px 0 0;
                        width: 50px;
                        height: 50px;

                      }
                    }
                }
            }
            .like-btn{
                font-size: 19px;
                margin-top: 16px;
                margin-right: 15px;
            }
        }
 
    }

    .bottom-comment{
        position: fixed;
        bottom: 0;
        display: flex;
        flex-flow: row nowrap;
        width: 100%;
        height: 40px;
        background-color:#f7f7f7;
        .van-field{
            height: 28px;
            margin: 7px 10px;
            padding: 4px;
        }
        .add{
            font-size: 31px;
            margin: 4px 10px;
            color: #979797;
        }
        .like{
            display: flex;
            flex-flow: row;
            margin-top: 3px;
            .like-icon{
                font-size: 28px;
                color: #5bb0d9;
                margin-top: 5px;
            }
            .unlike-icon{
                font-size: 28px;
                color: #979797;
                margin-top: 5px;
            }
            .like-num{
                font-size: 12px;
                color: #5bb0d9;
                margin-right: 3px;
            }
            .unlike-num{
                font-size: 12px;
                color: #979797;
                margin-right: 3px;
            }
            
        }
    }

    
}
</style>
